<template>
  <view class="content">
    <view class="head" :style="{backgroundColor:color}">
      <uni-icons type="arrowleft" size="20" class="icon" @click="goback"></uni-icons>
      <view class="heard_word">
        {{title}}
      </view>
      <view class="heard_word_a" @click="popup">
        {{text}}
      </view>
      <uni-icons type="arrowdown" size="15" class="icon_a"></uni-icons>
      <uni-popup ref="popup" type="bottom">
        <view class="popup">
          <view class="popup_head">
            选择日期
          </view>
          <view class="switch">
            <view class="switch_right" :class="{switch_left:falg==1}" @click="cheang">
              {{frist}}
            </view>
            <view class="switch_right" :class="{switch_left:falg==2}" @click="cheang_a">
              {{second}}
            </view> 
            <view class="switch_right" :class="{switch_left:falg==5}" @click="cheang_b">
              {{third}}
            </view> 
            <view class="switch_right" :class="{switch_left:falg==3}" @click="cheang_c">
              {{fourth}}
            </view>
          </view>
          <view class="time">
            选择日期
          </view>
          <view class="time_icon">
            <image src="../../../../static/data_analysis/rili.png" mode=""></image>
            <view class="time_number" v-if="falg==1">
              {{date_d}}
            </view> 
            <view class="time_number" v-if="falg==2">
              {{date_m}}
            </view> 
            <view class="time_number" v-if="falg==5">
              {{date_y}}
            </view> 
            <view class="time_number" v-if="falg==3">
              {{date_y}}
            </view>
          </view>
          <view class="popup_btn">
            <view class="btn_left">
              <button type="primary" plain="true" @click="cancel">取消</button>
            </view>
            <view class="btn_right">
              <button type="primary" @click="confirm">确认</button>
            </view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>
<script>
   import dateFtt from '@/util/dateFtt.js'
  export default {
    data() {
      return {
        falg:1,
        date_h:'',
        date_d:'',
        date_m:'',
        date_y:''
      };
    },
    created() {
     // 格式化时间
      // 时
      this.date_h =this.dateFtt('yyyy-MM-dd hh',new Date())
      // 日
      this.date_d =this.dateFtt('yyyy-MM-dd',new Date())
      // 月
      this.date_m =this.dateFtt('yyyy-MM',new Date())
      // 年
      this.date_y =this.dateFtt('yyyy',new Date())
      // console.log('date', this.date_h,this.date_d,this.date_m)
    },
    methods: {
      cheang() {
        this.falg = 1
      },
      cheang_a() {
        this.falg = 2
      },
      cheang_b() {
        this.falg = 5
      },
      cheang_c() {
        this.falg = 3
      },
      goback() {
        uni.navigateBack()
      },
      popup() {
        // 通过组件定义的ref调用uni-popup方法
        this.$refs.popup.open()
      },
      cancel() {
        // 通过组件定义的ref调用uni-popup方法
        this.$refs.popup.close()
      },
      confirm() {
        if(this.falg==1){
          this.$emit('confirm',{date:this.date_d,choice:this.falg})
        }if(this.falg==2){
          this.$emit('confirm',{date:this.date_m,choice:this.falg})
        }if(this.falg==5){
          this.$emit('confirm',{date:this.date_y,choice:this.falg})
        }if(this.falg==3){
          this.$emit('confirm',{date:this.date_y,choice:this.falg})
        }
        // 通过组件定义的ref调用uni-popup方法
        this.$refs.popup.close()
      }
    },
    props: ['title', 'text', 'color','frist','second','third','fourth']
  }
</script>
<style lang="scss">
  .content{
     // margin-top: calc( var(--status-bar-height));
    width: 100%;
    position: fixed;
     z-index: 999;
    
  }
  .head {
    overflow: hidden;
    position: relative;
     height: calc(88rpx + var(--status-bar-height));
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 !important ;
  }

  .heard_word {
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-bottom: 21rpx;
  }

  .icon {
    position: absolute;
    left: 40rpx;
    bottom: 25rpx;
  }

  .heard_word_a {
    position: absolute;
    right: 72rpx;
    bottom: 26rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .icon_a {
    position: absolute;
    right: 30rpx;
    bottom: 30rpx;
  }

  .popup {
    height: 929rpx;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0px 0px;
    overflow: hidden;
  }

  .popup_head {
    margin-top: 30rpx;
    text-align: center;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .switch {
    display: flex;
    width: 702rpx;
    margin: 64rpx auto 0;
    border-radius: 8rpx;
    border: 1rpx solid #EAEAEA;
  }

  .switch_left {
    width: 175rpx;
    height: 66rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 66rpx;
    text-align: center;
    background: #4EA1FF !important;
    border-radius: 8rpx;
  }

  .switch_right {
    width: 175rpx;
    height: 66rpx;
    font-size: 24rpx;
    font-weight: 500;
    line-height: 66rpx;
    text-align: center;
    background: #fff;
    border-right: 1rpx solid #EAEAEA;
  }
  .switch_right:last-child{
    border: none;
  }
  .time {
    margin: 60rpx 0 0 24rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
  }

  .time_icon {
    display: flex;
    margin: 20rpx auto 0;
    width: 702rpx;
    height: 66rpx;
    line-height: 66rpx;
    text-align: center;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1rpx solid #EEEEEE;

    image {
      margin: 20rpx 0 0 30rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }

  .time_number {
    margin-left: 21rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .time_word {
    margin: 0 39rpx 0 60rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .popup_btn {
    position: absolute;
    left: 24rpx;
    bottom: 30rpx;
    display: flex;
  }

  .btn_left {
    width: 242rpx;
    height: 80rpx;
    margin: 0 20rpx 20rpx 0;
  }

  .btn_right {
    width: 440rpx;
    height: 80rpx;
  }
</style>
